<template>
  <div class="app-container" style="background:#aaa;padding: 5px;">
    <el-container style="min-height: 600px;">
      <el-aside width="200px" style="padding: 6px 5px;background:#eee;">
        <el-tree
          :data="catalogs"
          node-key="id"
          ref="catalog"
          highlight-current
          :props="defaultProps"
          @node-click="getCheckedKeys"
        ></el-tree>
      </el-aside>

      <el-container>
        <el-aside width="300%" style="padding: 6px 5px;background:#fff;">
          <el-form
            ref="elForm"
            :model="targetCatalog"
            size="medium"
            label-width="100px"
          >
            <el-row>
              <el-col :span="18">
                <el-form-item label="类目名称" prop="project" label-width="150px">
                  <el-input
                    v-model="targetCatalog.catalogName"
                    placeholder="请输入类目名称"
                    :maxlength="11"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-mobile"
                    :style="{width: 'calc(100% - 150)'}"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="18">
                <el-form-item label="类目描述" prop="projectDesc" label-width="150px">
                  <el-input
                    v-model="targetCatalog.catalogDesc"
                    placeholder="请输入类目描述"
                    clearable
                    :style="{width: '100%'}"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="18">
                <el-form-item label="启用" prop="isReported" label-width="150px">
                  <el-switch
                    style="display: block"
                    v-model="targetCatalog.available"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="是"
                    inactive-text="否"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="18">
                <el-form-item label-width="0">
                  <el-button
                    type="primary"
                    @click="catalogAdd"
                  >新增
                  </el-button>
                  <el-button
                    type="success"
                    @click="saveCatalog"
                  >保存
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-aside>
      </el-container>
    </el-container>

    <el-dialog title="新增类目名称" :visible.sync="dialogVisible" width="50%">
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-form-item label="类目名称" prop="project">
          <el-input
            v-model="formData.catalogName"
            placeholder="请输入类目名称"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述说明" prop="catalogDesc ">
          <el-input
            v-model="formData.catalogDesc"
            placeholder="描述说明"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>

        <el-form-item label="上级类目" prop="parentId">
          <el-select v-model="formData.parentId" style="width: 100%;">
            <el-option v-if="targetCatalog.id"
                       :key="targetCatalog.catalogName"
                       :label="targetCatalog.catalogName"
                       :value="targetCatalog.id">
            </el-option>
            <el-option
              key="顶级类目"
              label="顶级类目"
              value=0>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="启用" prop="available" label-width="150px">
          <el-switch
            style="display: block"
            v-model="formData.available"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add(formData)">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {getCatalog, addCatalog, editCatalog, delCatalog} from '@/api/store'

  export default {
    name: "catalog",
    data() {
      return {
        formData: {
          parentId: 0,
          catalogName: "",
          catalogDesc: ""
        },
        dialogVisible: false,
        targetCatalog: {},
        catalogs: [],
        defaultProps: {
          children: "children",
          label: "catalogName"
        },
      }
    },
    created() {
      window.app = this
      this.getCatalogs()
    },
    methods: {
      saveCatalog(){
        editCatalog(this.targetCatalog).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success"
            });
          }
        });
      },
      change(d) {
        this.formData.parentId = d;
      },
      add(formData) {
        this.dialogVisible = false;

        addCatalog(formData).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success"
            });
            this.getCatalogs()
          }
        });
      },
      catalogAdd() {
        this.dialogVisible = true;
        this.formData = {
          parentId: this.targetCatalog.id ? this.targetCatalog.id : "0",
          catalogName: "",
          catalogDesc: ""
        }
      },
      getCheckedKeys(catalog) {
        this.targetCatalog = catalog;
      },
      getCatalogs() {
        getCatalog({"pageSize": -1,available: -1}).then(response => {
          if (response.code === 200) {
            this.catalogs = this.getTree(response.page.list)
          }
        })
      },
      getTree(d) {
        let temp = {};
        for (let k in d) {
          if (!temp[d[k].id]) {
            temp[d[k].id] = d[k];
          }
        }
        let tree = [];
        for (let i in temp) {
          if (temp[i].parentId) {
            if (!temp[temp[i].parentId]){
              temp[temp[i].parentId] = {}
            }
            if (!temp[temp[i].parentId].children) {
              temp[temp[i].parentId].children = [];
            }
            temp[temp[i].parentId].children.push(temp[i]);
          } else {
            tree.push(temp[i]);
          }
        }
        return tree;
      }
    }
  }
</script>

<style scoped>

</style>
